<script setup lang="ts">
import { ref, watch ,reactive,onMounted,  } from 'vue'
import { type RouteRecordRaw,  useRoute,  useRouter } from 'vue-router'
import { routes } from '@/router'
import { useAppStore } from '@/store'
import { darkTheme,lightTheme } from 'naive-ui'
import { Easel,ArrowUndoOutline,LogoGithub,Close,CopyOutline,Remove,LockOpenOutline,LockClosedOutline,Moon,SunnyOutline } from '@vicons/ionicons5'
import { open_win,reactive_darkThemeOverrides,reactive_lightThemeOverrides,parentPath,reset_theme,setWindows } from '@/utils/comm'

const store = useAppStore()
const route = useRoute()
const router = useRouter()
const menus = routes.filter(route => route.meta?.menu)
const menu_tabs = ref<any>({})

const datas =  reactive({
  top:false,
  theme:{} as any,
  darkThemeOverrides:{},
  lightThemeOverrides:{},
  transition:false,
  position:"bottom",
  show_menu:true
});

const open_small= ()=> {
  open_win("/home/small",330,60,1)
}

const switchThems = () => {
  if(store.thems?.dark=== undefined){
    reset_theme()
  }
  datas.position=store.thems?.menu_left?"right":"bottom"
  datas.theme = store.thems
  datas.lightThemeOverrides = reactive_lightThemeOverrides(datas.theme.primary)
  datas.darkThemeOverrides = reactive_darkThemeOverrides(datas.theme.primary)
  if(datas.theme.dark){
    document.body.classList.remove('light-mode')
    if(datas.transition){
      document.body.removeAttribute('transition-style')
      document.getElementById("main_app")?.setAttribute('transition-style','in:custom:circle-swoop')
    }
  }else{
    document.body.classList.add('light-mode')
    document.body.removeAttribute('transition-style')
    document.getElementById("main_app")?.setAttribute('transition-style','out:custom:circle-swoop')
  }
}

const on_dark = () => {
  datas.theme.dark = !datas.theme.dark
  store.setthems(datas.theme)
}
 
const clickMenu = (menu: RouteRecordRaw) => {
  if(menu.path === '/home/small'){
    open_small()
    return
  }
  if (menu.path === route.path) return
  router.push(menu.path)
}

const goBack = () => {
  if(route.path === '/home') return
  router.go(-1);
}

const keydown = (e:any) => {
  if (e.keyCode == 27&&datas.theme.esc_btn) {
    goBack()
  }
}


watch(
  () => store.cachePage?.list,(newValue, oldValue) => {
    if (oldValue!=newValue) {
      //console.log(newValue,'主框架');
    }  
  },
  { deep: true,immediate: true }
)
 
watch(
  () => JSON.stringify(store.thems) ,(newValue, oldValue) => {
    if (oldValue!=newValue) {
      switchThems()
    }  
  },
  { deep: true,immediate: true }
)

onMounted(() => {
  window.onresize = () => {
    menu_tabs.value.syncBarPosition()
  }
  window.addEventListener("keydown", keydown)
  switchThems()
  datas.transition = true
})

router.beforeEach((to,from,next)=>{
  if(to.path === '/home/small'){
     datas.show_menu = false
  }
  next();
 })


</script>

<template> 
  <n-config-provider abstract preflight-style-disabled :theme="datas.theme.dark?darkTheme:lightTheme" :theme-overrides="datas.theme.dark?datas.darkThemeOverrides:datas.lightThemeOverrides">
    <n-notification-provider><n-message-provider><n-dialog-provider>
    <n-loading-bar-provider>

    <div class="bg"  id="main_app"></div>
    <n-layout  has-sider  class="main_app on_move">
        <n-layout-sider v-show="datas.show_menu" class="left_side" :class="datas.theme.menu_left?'bottom_side':''" content-style="padding:10px;overflow:hidden;" :width="datas.theme.menu_left?'100%':'60'">
          <div :style="datas.theme.menu_left?'display: flex;':''">
            <n-space class="back-box on_nomove" :style="datas.theme.menu_left?'width: 60px;':''">
                <n-icon size="20" :class="route.path === '/home'?'back-no':'back-yes'" @click="goBack()"><ArrowUndoOutline /> </n-icon>
            </n-space>
            <n-tabs ref="menu_tabs" type="bar" :placement="datas.theme.menu_left?'top':'right'"   animated  :value="parentPath(route.path)" :theme="darkTheme" size="small" :bar-width="16" :class="datas.theme.menu_left?'menu_tabs_bottom':'menu_tabs'">
                  <n-tab :name="item.path" :style="item.path === '/system'?'position: absolute;'+datas.position+': 0;':''" v-for="(item, index) of menus"  :key="index"  @click="clickMenu(item)">
                      <n-icon size="20" class="menu-icon on_nomove" :component="item.meta?.icon" />
                  </n-tab> 
                  <n-tab name="dark" style="position: absolute;"  :style="datas.position+':60px'"  :key="99"  @click="on_dark()">
                    <n-icon size="22" class="menu-icon on_nomove" color="#ff7b1e" v-if="datas.theme.dark"><Moon/></n-icon>
                    <n-icon size="22" class="menu-icon on_nomove" color="#9a0b0b" v-else><SunnyOutline/></n-icon>
                  </n-tab>   
            </n-tabs>
          </div>
          <n-divider :class="datas.theme.menu_left?'xian_bottom':'xian'" />
        </n-layout-sider>

        <n-layout class="right_side">
          <n-layout-header class="head" v-show="datas.show_menu">
            <n-space class="header-logo">
              <n-icon size="30"><LogoGithub /> </n-icon>
            </n-space>
            <n-space class="windows-bar on_nomove">
              <n-icon size="20" class="button-item" @click="setWindows('notop');datas.top=!datas.top" v-if="datas.top"><LockClosedOutline /></n-icon>
              <n-icon size="20" class="button-item" @click="setWindows('top');datas.top=!datas.top" v-else><LockOpenOutline /> </n-icon>
              <n-icon size="20" class="button-item" @click="setWindows('minimize')"><Remove /> </n-icon>
              <n-icon size="20" class="button-item" @click="setWindows('maximize')"><CopyOutline /> </n-icon>
              <n-icon size="20" class="button-item" @click="setWindows('close')"><Close /> </n-icon>
            </n-space>
          </n-layout-header>
          <div class="main on_nomove" :class="datas.show_menu?'':'main_height'"  content-style="padding:10px;" :style="datas.theme.menu_left?'border-radius:0':''">
            <router-view v-slot="{ Component }">
              <keep-alive :include="store.cachePage?.list">
                <component :is="Component" :datas="datas"/>
              </keep-alive>
            </router-view> 
          </div>
        </n-layout>
        <div class="small_video" v-show="datas.show_menu">
          <n-button type="primary" circle @click="open_small">
            <n-icon size="25" color="#fff" class="button-item"><Easel /> </n-icon>
          </n-button>
          
        </div>
    </n-layout>
  </n-loading-bar-provider>
  </n-dialog-provider>
  </n-message-provider>
  </n-notification-provider>
  </n-config-provider>
</template>

<style lang="scss" scoped>
 .bg{
  position: fixed;width: 100%;height:100vh;z-index: 0;
  background-color: #202020;
 }
.left_side{
  height:100vh;
  .back-box{
    margin-bottom: 10px;
    width: 100%;
    .back-yes,.back-no{
      padding: 10px;
      cursor: pointer;
      line-height: 0;
      transition:all .3s ease-out 0s;
      border-radius: 5px;
      color:#807f7f5d
    }
    .back-yes{
      background-color:  var(--hover2);
      color: #fff;
    }
  }
  .menu_tabs{
    height:calc(100vh - 70px);
    :deep(.n-tabs-nav-scroll-content) {
      height: 100% !important;
    } 
    :deep(.n-tabs-wrapper) {
      height: 100% !important;
    } 
    :deep(.n-tabs-tab) {
      border-radius: 5px !important;
      padding: 10px !important;
      &:hover{
        background-color: var(--hover1) !important;
        
      }
    } 
    :deep(.n-tabs-tab--active) {
      background-color: var(--hover1) !important;
      animation: rubberBand;animation-duration: 0.5s;
    } 
    :deep(.n-tabs-bar) {
      // width: 3px !important;
      border-radius: 3px;
    } 
  }
  .menu_tabs_bottom{
    width:500px;flex:1;height: 60px;overflow: hidden;
    height:calc(100vh - 70px);
    :deep(.n-tabs-tab-pad) {
      width: 10px;
    } 
    :deep(.n-tabs-nav-scroll-content) {
      width: 100% !important;
      height: 100% !important;
    } 
    :deep(.n-tabs-wrapper) {
      width: 100% !important;
      height: 100% !important;
    } 
    :deep(.n-tabs-tab) {
      border-radius: 5px !important;
      padding: 10px !important;
      &:hover{
        background-color: var(--hover1) !important;
      }
    } 
    :deep(.n-tabs-tab--active) {
      background-color: var(--hover1) !important;
    } 
    :deep(.n-tabs-bar) {
      border-radius: 3px;
    } 
  }
  .menu-icon {
    width: 20px;
    height: 20px;
  
  }
  .xian{
    position: fixed;
    width: 40px;
    height: 1px;
    background-color: var(--hover1);
    bottom:35px;
    left:10px;
    z-index: 1000;
  }
  .xian_bottom{
    position: fixed;
    width: 1px;
    height: 38px;
    background-color: var(--hover1);
    right:60px;
    bottom:-13px;
    z-index: 1000;
  }
}
.bottom_side{
    position: fixed !important;
    bottom: 0 !important;
    z-index: 9999;
    height: 60px;
    width: 100%;
    overflow: hidden;
}

.right_side{
  background-color: var(--n-color);
  .head{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-logo {
      margin-left: 10px;
      margin-top: 5px;
    }
    .windows-bar{
      display: flex;
      align-items: center;
      justify-content: end;
      margin-right: 10px;
      margin-top: 5px;
      .button-item{
        padding: 4px;
        cursor: pointer;
        transition:all .3s ease-out 0s;
        border-radius: 3px;
        &:hover{
          background-color: var(--hover1);
        }
      }
    }
  }
  .main{
    border-top-left-radius: 10px;
    overflow: hidden;
    height:calc(100vh - 50px);
    background-color: rgba(148, 144, 144, 0.1);
  }
  .main_height{
    height: 100vh;
  }
}

.light-mode { 
  .header-logo {
      color: #1d1d1d;
    }
  .left_side{
    .back-box{
      .back-yes,.back-no{
        color:#2928289f
      }
      .back-yes{
        background-color:  var(--light-hover);
        color: #000;
      }
    }
    .menu_tabs{
      :deep(.n-tabs-tab) {
        &:hover{
          background-color: var(--light-hover-deep) !important;
        }
      } 
      :deep(.n-tabs-tab--active) {
        background-color:var(--light-hover-deep) !important;
      } 
    }
  }
  .main{
    background-color: rgba(255, 255, 255, 0.08) !important;
  }
}
:deep(.n-scrollbar-rail) {
  right: 2px !important;
  width: 2px !important;
} 
:deep(.n-layout-scroll-container) {
  padding: 0 !important;
} 
.small_video{
  position: fixed;
  right: 5px;
  bottom: 5px;
  animation: swing 1s infinite linear;
  border-radius: 50%;
  background-color: #fff;
  padding: 2px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  z-index: 99999999;
}
</style>